<template>
    <div class="container">
		<div class="content">
			<div class="today-head">
				<div class="left">
					<!-- <div class="title">关注的人</div> -->
					<div class="list">
						<div class="item">
							<image :src="otherUserInfo.avatarPath" mode=""></image>
							<span>{{otherUserInfo.nickname}}</span>
						</div>
						<!-- <div class="item" v-for="(item,index) in userList" :key="index" @click="toOtherTodayData(item.userId)">
							<image :src="item.avatarPath" mode=""></image>
						</div> -->
					</div>
					<!-- <div class="more" v-show="userList.length > 8" @click="getUserFollowPage()">更多</div> -->
				</div>
				<div class="right">
					<div class="nav">
						<div class="nav-left" @click="toMyTodayData()">返回本人</div>
						<div class="nav-right">{{$utils.monthDate()}}&nbsp;&nbsp;&nbsp;&nbsp;{{$utils.week()}}</div>
					</div>
					<div class="chart-body" id="chart_canvas"><l-f2 ref="todayIndex"></l-f2></div>
				</div>
			</div>
			<div class="history">
				<div class="history-item">他/她的历史</div>
				<div class="history-item">平均<span class="num">{{userTodayIndex.average}}</span></div>
				<div class="history-item">最高<span class="num">{{userTodayIndex.maximum}}</span></div>
				<div class="history-item">最低<span class="num">{{userTodayIndex.minimum}}</span></div>
			</div>
			<div class="history">
				<div class="history-item">关注人今日</div>
				<div class="history-item">平均<span class="num">{{userTodayIndex.averageContact}}</span></div>
				<div class="history-item">最高<span class="num">{{userTodayIndex.maximumContact}}</span></div>
				<div class="history-item">最低<span class="num">{{userTodayIndex.minimumContact}}</span></div>
			</div>
			<div class="today-calendar">
				<ren-calendar ref='ren' :calendar="calendarList" @changeMonth="changeMonth" :markDays='markDays' :collapsible="false" :headerBar='true' @onDayClick='onDayClick'></ren-calendar>
			</div>
		</div>
			
    </div>
</template>

<script>
    import data from '@/js/index/todayData/data.js';
    import methods from '@/js/index/todayData/methods.js';
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
    import {mapState} from 'vuex';
	// 引入antv组件
	import F2 from '@/uni_modules/lime-f2/components/l-f2/f2-all.min.js';
	import RenCalendar from '@/components/ren-calendar.vue'
    export default {
        data,
        methods,
        onLoad(e) {
			// uni.setTabBarBadge({
			//   index: 0,
			//   text: '1'
			// })
			this.id = e.id
			this.getTodayIndex(e.id)
			// this.getUserFollowPage(e.id)
			this.getOtherUserInfo(e.id)
			this.getUserCalendarInfo(e.id)
			this.getUserTodayIndex(e.id)
			// setTimeout(()=>{this.$refs.confirmPopup.open()},1000)
        },
        onShow() {
			
		},
		onReady() {
			let today = this.$refs.ren.getToday().date;
			this.curDate = today;
			this.markDays.push(today);
		},
        onHide() {
            console.log('on hide')
        },
        onUnload() {
        },
        computed: {
        	...mapState([ 'userInfo']),
        	bgHeight() {
        		// #ifdef APP-PLUS
        		return 250
        		// #endif
        		return this.navigationBarHeight + uni.upx2px(364);
        	}
        },
	
        components: {
			uniPopup,
			RenCalendar
        }
    };
</script>

<style>
   page{
   	background-color: #f7f7f7;
   }
  /* uni-page{
   	background-color: #FFFFFF;
   } */
</style>
<style scoped lang="scss">
    @import '~@/style/index/todayData.scss';
	
</style>